<template>
	<view class="content-box">
		<view class="title-box">
			<view class="info-box">
				<image :src="userInfo.avatarUrl" class="avatar"></image>
				<view class="detail-info" v-if="signature">
					<view class="name">{{userInfo.nickName}}</view>
					<view class="edit-info">编辑个人信息</view>
				</view>
				<view class="detail-info" v-else >
					<view class="name" @click="login">点我登录</view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="operate-items">

			</view>
			<view class="contact"></view>
			<view class="setting"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					nickName:'',
					avatarUrl:''
				},
				signature:''
			};
		},
		methods: {
			login() {

				uni.getUserProfile({
						lang: 'zh_CN',
						desc: '注册',
						success: infoRes => {
							this.userInfo.nickName = infoRes.userInfo.nickName
							this.userInfo.avatarUrl = infoRes.userInfo.avatarUrl
							this.signature = infoRes.signature
							console.log('用户昵称为：' + infoRes.userInfo.nickName);
							console.log('用户头像为：' + infoRes.userInfo.avatarUrl);
							console.log('用户签名：'+infoRes.signature)
						}	
					})

				}
			}
		}
</script>

<style lang="scss">
	page {
		background-color: #ECEBF0;
	}

	.content-box {

		.title-box {
			width: 750rpx;
			height: 320rpx;
			background-color: #282C35;

			.info-box {
				width: 680rpx;
				margin: 0 auto;
				padding-top: 40rpx;
				display: flex;
				align-items: center;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					background-color: white;
					border-radius: 150rpx;
					margin-right: 20rpx;
				}

				.detail-info {
					color: white;
				}
			}
		}

		.bottom-box {
			.operate-items {
				width: 750rpx;
				height: 280rpx;
				background-color: white;
				border-radius: 30rpx 30rpx 0 0;
				margin-top: -20rpx;
				margin-bottom: 10px;
			}

			.contact {
				width: 750rpx;
				height: 110rpx;
				background-color: white;
				margin-bottom: 10px;
			}

			.setting {
				width: 750rpx;
				height: 110rpx;
				background-color: white;
			}
		}
	}
</style>
